<template>
<ContentWrap> 
    <el-button    type="primary" @click="$refs.postDlg.open()" icon="plus"  plain title="拉岗位进部门">拉岗位</el-button>
                <el-button :disabled="disBtn('delBtn') || !checkBtnQx('delBtn',menuDefId) || this.sels.length===0 || load.del==true" type="danger" v-loading="load.del" @click="batchDel" icon="delete"  plain >移出部门</el-button>
            
</ContentWrap>
<!--列表 DeptPost 部门岗位关系表-->
<el-table ref="table" v-adaptive :data="tableDatas" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
    <el-table-column  type="selection" width="55" show-overflow-tooltip fixed="left" />
      <el-table-column prop="postName" label="岗位" min-width="120"  col-type="String"/>
      
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="scope"> 
          <el-button size="mini"
                     @click="$refs['postUserListDialog'].open({ filters:{postId:scope.row.id,deptid:scope.row.deptid},subOpType:'postUserMng'})"
                     icon="user" title="查看角色拥有的用户"/> 
        </template>
      </el-table-column>
 
</el-table>
<el-pagination
    layout="slot,total"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    :page-sizes="[10,20, 50, 100, 500]"
    :current-page="pageInfo.pageNum"
    :page-size="pageInfo.pageSize"
    :total="pageInfo.total"
    style="float:right;"
/> 

  
<mdp-dialog ref="postDlg" title="选择岗位" width="80%"> 
      <post-select subOpType='select' multiple  @select="onPostSelect" /> 
  </mdp-dialog>
  <mdp-dialog ref="postUserListDialog" width="80%">
    <template #default="{visible,data}">
      <DeptPostUserIndex subOpType="mng" :visible="visible" :params="data.filters"/>
    </template>
  </mdp-dialog>
</template>


<script>

import { MdpTableMixin } from '@/components/mdp-ui/mixin/MdpTableMixin.js';
import * as DeptPostApi from '@/api/mdp/sys/deptPost';
 import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'

import DeptPostUserIndex from "../deptPostUser/Index.vue";//设置岗位的角色
import PostSelect from '../post/Index.vue'
export default {
    name:'DeptPostMng',
    mixins:[MdpTableMixin],
    components: { 
        PostSelect,DeptPostUserIndex
    },
    computed: {
        ...mapState(useUserStore,['userInfo'])
    },
    watch:{
    },
    data() {
        return {
            menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
            menuDefName:'部门岗位关系表',//menu_def.name 功能名称，用于导出excel等文件名
            pkNames:["deptid", "postId"],//表格主键的java属性名称，驼峰命名，默认为id,支持多主键
            currOpType:'mng',//表格 mng-综合管理具有最大权限，所有按钮可动、detail-只看不能操作
            filters:{//查询参数

            },
            defaultFilters:{//默认查询参数,第一次打开界面的时候用到，恢复默认值的时候用到

            },

            //增删改查(含批量)接口
            apis:{
                list: DeptPostApi.listDeptPost, 
                batchAdd: DeptPostApi.batchAddDeptPost,
                batchDel: DeptPostApi.batchDelDeptPost, 
            }
        }
    },
    methods: {
         //页面初始化需要配置的特殊逻辑写这里
          initCurrData(){
             this.searchTableDatas();
          },

          /**
           * 检查参数是否满足调用后台接口的条件
           *
           * @param params 提交给后台的参数池,map类型
           * @returns true / false
           */
          preQueryParamCheck(params){
              return true;
          },

          //页面数据加载完后需要对数据进行加工处理的
          afterList(tableDatas,isOk,apiName){

          },

          /**
           * 对修改的字段进行判断，返回false ,将取消更新数据库
           * @param {*} row 当前选中的行
           * @param {*} fieldName 修改的字段名
           * @param {*} $event 修改后的值
           * @param {*} params 将要提交服务器的参数
           * @returns true/false 返回false ,将取消更新数据库
           */
          editSomeFieldsCheck(row,fieldName,$event,params){
              if(this.currOpType=='add'||this.currOpType=='detail'){
                  return false;
              }
              params[fieldName]=$event
              return true;
          },
          
        onPostSelect(posts){
            this.load.edit=true    
            var params=posts.map(k=>{return {deptid:this.params.deptid,postId:k.id}})
            DeptPostApi.batchAddDeptPost(params).then((res) => {
                this.load.edit=false
                var tips=res.tips;
                if(tips.isOk){ 
                    this.$emit('submit');//  @submit="afterAddSubmit"
                    this.searchTableDatas()
                    this.$refs.postDlg.close();
                }
                this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
            }).catch(() => this.load.edit=false); 
        }
    },
    mounted() {

    }
}

</script>

<style scoped>
</style>